<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Move Cards</title>
    <style>
        .container {
            
        } 
        .item {
            float: left;
            margin: 0 10px 10px 0;
            background: gray;
            width: 200px;
            height: 150px;
            white-space: nowrap;
        }
        @keyframes fadeIn {
            0% {
                opacity: 0;
                transform: translate(0, -100px);
            }
            100% {
                opacity: 1;
                transform: translate(0, 0);
            }
        }
        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: translate(0, 0);
            }
            to {
                opacity: 0;
                transform: translate(0, -100px);
            }
        }
        .fade-animation-enter {
            opacity: 0;
            transform: translate(0, -100px);
        }
        .fade-animation-enter-active {
            animation: fadeIn 1s;
        }
        .fade-animation-leave-active {
            animation: fadeOut 1s; 
        }
      .fade-transition-enter-active, .fade-transition-leave-active, .fade-transition-move,
      .fade-js-move, .fade-animation-move {
        transition: all 1s cubic-bezier(.55,0,.1,1);
      }
      <!-- .fade-js-leave-active { -->
          <!-- position: absolute; -->
      <!-- } -->
      .fade-transition-enter, .fade-transition-leave {
        opacity: 0;
        /* transform: translate(0, -100px); */
        transform: scale(0.5);
        /* width: 0; */
      }
      .slide-fade-enter-active {
          transition: all .3s ease;
       }
       .slide-fade-leave-active {
         transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
       }
       .slide-fade-enter, .slide-fade-leave {
         transform: translateX(10px);
         opacity: 0;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script>
    <script src="../../dist/intact.js"></script>
    <script src="//cdn.jsdelivr.net/velocity/1.5/velocity.min.js"></script>
  </head>
  <body>
      <script type="text/vdt" id="template">
        <div id="app">
          <button ev-click={self.insert.bind(self)}>insert one card at random index</button>
          <button ev-click={self.reset.bind(self)}>reset</button>
          <button ev-click={self.shuffle.bind(self)}>shuffle</button>
          <button ev-click={self.insertAndRemove.bind(self)}>insert and remove</button>
          mode: <select v-model="mode">
            <option value="both">both</option>
            <option value="out-in">out-in</option>
            <option value="in-out">in-out</option>
          </select>
          animation type: <select v-model="type">
            <option value="transition">transition</option>
            <option value="animation">animation</option>
            <option value="js">js</option>
          </select>
          <Animate a:tag="ul" class="container" a:mode={self.get('mode')}>
            <Animate a:transition={"fade-" + self.get('type')} v-for={self.get('items')} class="item" key={value}
                ev-a:enterStart={self.get('type') === 'js' ? self.enterStart.bind(self) : undefined}
                ev-a:enter={self.get('type') === 'js' ? self.enter.bind(self) : undefined}
                ev-a:enterEnd={self.get('type') === 'js' ? self.enterEnd.bind(self) : undefined}
                ev-a:leave={self.get('type') === 'js' ? self.leave.bind(self) : undefined}
            >
                {value} <button ev-click={self.remove.bind(self, key)}>x</button>
            </Animate>
          </Animate>
          <!-- <Animate v-if={self.get('items').length % 2} a:transition="slide-fade">toggle</Animate>-->
        </div>
    </script>

    <script>
        var id = 6;

        var App = Intact.extend({
            defaults: {
                items: [1, 2, 3, 4, 5],
                mode: 'both',
                type: 'transition'
            },
            template: document.getElementById('template').innerHTML,
            insert() {
                var items = this.get('items');
                var i = Math.round(Math.random() * items.length);
                items.splice(i, 0, id++);
                this.update();
            },
            reset() {
                this.set('items',  [1, 2, 3, 4, 5]);
            },
            shuffle () {
                this.set('items', _.shuffle(this.get('items')));
            },
            remove(index) {
                var items = this.get('items');
                items.splice(index, 1);
                this.update();
            },
            insertAndRemove() {
                var items = this.get('items');
                var i = Math.floor(Math.random() * items.length);
                items.splice(i, 1);
                this.insert();
            },

            enterStart(el) {
                el.style.opacity = 0;
            },

            enter(el, done) {
                Velocity(el, { 
                    transformPerspective: ['600px', '600px'],
                    transformOriginX: ['0', '0'],
                    transformOriginY: ['50%', '50%'],
                    rotateY: [0, -60],
                    opacity: [1, 0]
                }, {
                    duration: 1000,
                    complete: done
                });
            },

            enterEnd(el) {
                Velocity(el, 'stop');
                el.style.transform = '';
                el.style.opacity = '';
                el.style.transformOrigin = '';
                <!-- const p = el.style.position; -->
                <!-- const l = el.style.left; -->
                <!-- const r = el.style.right; -->
                <!-- el.style = ''; -->
                <!-- el.style.position = p; -->
                <!-- el.style.left = l; -->
                <!-- el.style.right = r; -->
            },

            leave(el, done) {
                Velocity(el, { 
                    transformPerspective: ['600px', '600px'],
                    transformOriginX: ['0', '0'],
                    transformOriginY: ['50%', '50%'],
                    rotateY: [-60, 0],
                    opacity: [0, 1]
                }, {
                    duration: 1000,
                    complete: done
                });
            }
        });
        var app = Intact.mount(App, document.body);

        var test = function() {
            app.get('items').splice(2, 1); 
            app.update(); 
            setTimeout(() => {
                app.get('items').splice(2, 1);
                app.update(); 
                setTimeout(() => {
                    app.get('items').splice(2, 0, 4); 
                    app.update();
                    setTimeout(() => {
                        app.get('items').splice(2, 1); 
                        app.update()
                    }, 300);
                }, 300);
            }, 300);
        }
    </script>
  </body>
</html>
